<template>
  <div>
    <div>
      <router-view />
    </div>
    <div>
      <van-tabbar v-model="active" :active-color="color[active]" inactive-color="#999" route>
        <van-tabbar-item v-for="(item, index) in tabList" :key="index" :dot="item.dot" :badge="item.badge" :to="item.to" replace>
          <span>{{ item.title }}</span>
          <template #icon="props">
            <img :src="props.active ? item.iconSrc.active : item.iconSrc.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>





<script>
export default {
  name: "Main",

  data() {
    return {
      active: 0,
      color: ["#00a862", "#ff594d", "#ffa341", "#82a6ee"],
      tabList: [
        {
          title: "首页",
          iconSrc: {
            active: require("../assets/images/home_active.png"),
            inactive: require("../assets/images/home_inactive.png"),
          },
          to: { name: "Home" },
        },
        {
          title: "菜单",
          iconSrc: {
            active: require("../assets/images/menu_active.png"),
            inactive: require("../assets/images/menu_inactive.png"),
          },
          to: { name: "Menu" },
        },
        {
          title: "购物袋",
          iconSrc: {
            active: require("../assets/images/shopping_active.png"),
            inactive: require("../assets/images/shopping_inactive.png"),
          },
          to: { name: "Shopping" },
          // badge: null
        },
        {
          title: "我的",
          iconSrc: {
            active: require("../assets/images/user_active.png"),
            inactive: require("../assets/images/user_inactive.png"),
          },
          to: { name: "User" },
        },
      ],
    };
  },

  created() {
    // 获取导航栏当前索引值
    this.active = sessionStorage.getItem("tabbarActive");

    // 获取用户信息
  },

  methods: {
    router(url) {
      
    }
  },
};
</script>





<style lang="less" scoped>
.van-tabbar-item--active {
  color: #00a862;
}
</style>